import React, { Component } from 'react';

/*
  学习目标：使用props的类型校验
  步骤：
  */
// 1. 导入包 prop-types， 作用：提供类型
import PropTypes from 'prop-types';
export default class App extends Component {
  render() {
    return (
      <div>
        <Child
          el={<h1>我是元素</h1>}
          obj={{ age: 18 }}
          obj2={{ name: '18' }}
          fn={() => {}}
          msg="12"
          count={123}
          isShow={true}
        ></Child>
      </div>
    );
  }
}

class Child extends React.Component {
  render() {
    return (
      <div>
        <h1>Child</h1>
      </div>
    );
  }
}

// 🔑 propTypes 是属性名， PropTypes是包名，注意区分大小写
// 2. 设置propTypes属性，固定写法，名字写死
Child.propTypes = {
  // 3. 设置规则
  msg: PropTypes.string.isRequired,
  count: PropTypes.number,
  isShow: PropTypes.bool,
  fn: PropTypes.func,
  obj: PropTypes.object,
  el: PropTypes.element,

  // shape表示固定的对象结构
  obj2: PropTypes.shape({
    // 🔔只校验设置了的键名，没设置过的校验，此时不会校验其它属性
    name: PropTypes.string,
  }),
};

// 1. PropTypes.element
// 2. PropTypes.shape 固定键名的对象类型
// 3. isRequired 必填
